<template>
  <!-- <h1 text-center>Todo List</h1> -->
  <!-- <h1 class="text-center text-red">Todo List</h1> -->
  <h1 text-center text-red>
    <div class="i-ep-add-location"></div>
    Todo List
    <div class="i-zf-circle"></div>
  </h1>
  <div flex justify-center items-center>
    <input
      type="text"
      v-model="todo"
      h-25px
      shadow
      shadow-inset
      shadow-green-100
    />
    <el-button @click="addTodo">添加内容</el-button>
  </div>
  <div class="container">
    <el-form :model="form" class="form" style="background: #ccc">
      <el-row>
        <el-col :span="5">
          <el-form-item label="所属类别">
            <span class="parent-type">{{ form.parentName ?? "对象" }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否叶子节点">
            <el-radio-group
              id="radiogroup"
              v-model="form.isleaf"
              :disabled="form.barid && form.barid != ''"
            >
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100" style="margin-top: 10px">
        <el-col :span="10">
          <el-form-item label="对象名称">
            <el-input v-model="form.barname" class="dark" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="顺序" class="is-required" prop="index">
            <el-input-number
              v-model="form.index"
              class="dark"
              controls-position="right"
              :min="1"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="5">
          <el-form-item label="图标">
            <div class="icon-display-box" v-html="form.svgBody"></div>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            style="width: 60px"
            @click="selectIcon('svgBody', 'svg')"
          >
            选择
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button
            type="warning"
            style="width: 60px"
            @click="cancelIcon('svgBody', 'svg')"
          >
            清除
          </el-button></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"> 光照颜色： </el-col>
        <el-col :span="18" style="height: 36px">
          <el-color-picker
            color-format="rgb"
            show-alpha
            size="large"
            v-model="form.lightColor"
            @change="updateLight"
            @active-change="updateLightColor"
          ></el-color-picker>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6"> 光照强度： </el-col>
        <el-col :span="18">
          <el-slider
            v-model="form.lightIntensity"
            :min="0"
            :max="1"
            :step="0.1"
            @change="updateLight"
            show-input
            input-size="small"
          ></el-slider>
        </el-col>
      </el-row>
    </el-form>
    <formCom class="form" :form-conf="testConf" :_parent="that"></formCom>
  </div>

  <!-- <ul>
    <li v-for="(item, index) in todos" :key="index">{{ item }}</li>
  </ul> -->
</template>
<script setup lang="ts">
var ctx
// import { ref, toRefs } from "vue"
import TodoList from "@/components/todo/todo-list"
import myForm from "./myForm"
// import { ElInput, ElRadio, ElRadioGroup } from "element-plus"
/////ElInputNumber????????????
// import myFormVue from "./myForm.vue"
import formCom from "../formCom"
import testForm from "./testForm.json"

const emitFunc = (func: string) => {
  console.log(func)
}
const that = getCurrentInstance() //
const todo = ref("")
const isload = ref(false)
const todos = ref<string[]>([])
//#region enum interface
enum rowType {
  "flex"
}
enum labelPosition {
  "right",
  "left",
  "top"
}
interface baseComponentInterface {
  class?: any
  style?: any
  attrs?: {
    // 普通的 HTML attribute
    id?: "baz"
    [propName: string]: any
  }
  props?: any // 组件 prop
  scopedSlots?: {
    //插槽
    default?: VNode
  }
  domProps?: {
    // DOM property
    innerHTML?: "baz"
    [propName: string]: any
  }
  on?: {
    // 事件监听器在 `on` 内，
    // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
    // 需要在处理函数中手动检查 keyCode
    [propName: string]: any
  }
  nativeOn?: {
    // 仅用于组件，用于监听原生事件，而不是组件内部使用
    // `vm.$emit` 触发的事件。
    [propName: string]: any
  }
  slot?: string // 如果组件是其它组件的子组件，需为插槽指定名称
  key?: string
  ref?: string
  childNode?: Array<[baseComponentInterface]> //子元素
}
interface componentInterface extends baseComponentInterface {
  formItemProps?: {
    prop?: string //绑定属性 与data-key 对应
    label?: string //item名称
    isRequired?: boolean //必选 添加*样式 及校验函数 与rule 关联
    "label-width"?: string //表单域标签的宽度
    "label-position"?: labelPosition //表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
    rules?: object
    // formProp?: string //绑定属性 与data-key 对应
  }
  [propName: string]: any
  span?: number //占位
  offset?: number //左偏
  push?: number //右偏
  comName: string //组件类型
}
interface formInterface extends baseComponentInterface {
  props?: {
    "label-width"?: string //表单域标签的宽度
    "label-position"?: labelPosition //表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
    model?: object //数据
    rules?: object
  } //属性表
  [propName: string]: any
  template: Array<[rowInterface]>
  on?: {
    validate?: Function
  } //事件表
}
interface rowInterface extends baseComponentInterface {
  components?: Array<[componentInterface]>
  [propName: string]: any
  props?: {
    align?: string
    type?: rowType
    gutter?: number //栅格间隔
    justify?: string
  }
}
//#endregion
//#region declare class
class jsonConfig {
  public defautOptions: any
  public option: typeof this.defautOptions = {}
  get value(): typeof this.defautOptions {
    return this.option
  }
  set(options: typeof this.defautOptions) {
    Object.assign(this.option, options)
  }
  constructor(defautOption: any, options: any) {
    this.defautOptions = defautOption
    this.option = Object.assign(defautOption, options)
    this.option.varys = {} //存储form变量 v-for item等

    // this.option._instance = this
  }
}
class componentConf extends jsonConfig {
  defautOptions: componentInterface = {
    style: "", //样式
    class: "", //类名
    on: {}, //事件表
    props: {
      //组件属性
    }, //属性表

    formItemProps: {
      // formProp: undefined, //绑定属性 与data-key 对应
      prop: undefined, //用于验证
      label: undefined, //item名称
      isRequired: true //必选 添加*样式 及校验函数 与rule 关联
    },
    span: 6, //占位
    offset: 0, //左偏
    push: 0, //右偏
    comName: "" //组件类型
  }
  constructor(options: componentInterface) {
    let defautOptions: componentInterface = {
      style: "", //样式
      class: "", //类名
      on: {
        change: emitFunc("func1")
      }, //事件表
      props: {
        //组件属性
      }, //属性表
      formItemProps: {
        prop: undefined, //
        // formProp: undefined, //绑定属性 与data-key 对应
        label: undefined, //item名称
        isRequired: false //必选 添加*样式 及校验函数 与rule 关联
      },
      span: 6, //占位
      offset: 0, //左偏
      push: 0, //右偏
      comName: "" //组件类型
    }
    super(defautOptions, options)
  }
}
class rowConf extends jsonConfig {
  defautOptions: rowInterface = {
    style: "", //样式
    class: "", //类名
    components: [],
    props: {
      gutter: 20
    }
  }
  constructor(options: rowInterface) {
    let defautOptions: rowInterface = {
      style: "", //样式
      class: "", //类名
      components: [],
      props: {
        gutter: 20
      }
    }
    super(defautOptions, options)
  }
}
class formConf extends jsonConfig {
  defautOptions: formInterface = {
    style: "", //样式
    class: "", //类名
    on: {}, //事件表
    props: {
      "label-width": "", //表单域标签的宽度
      model: {} //数据
    }, //属性表
    template: []
  }
  constructor(options: formInterface) {
    let defautOptions: formInterface = {
      style: "", //样式
      class: "", //类名
      on: {}, //事件表
      props: {
        "label-width": "", //表单域标签的宽度
        model: {} //数据
      }, //属性表
      template: []
    }
    super(defautOptions, options)
  }
}
//#endregion
// let form: object = reactive<object>({
//   parentName: "test",
//   isleaf: "1",
//   barid: "",
//   barname: "barname",
//   index: 666,
//   svgBody: "<div>svgBody</div>"
// })
let form: object = reactive({
  parentName: "test",
  isleaf: "1",
  barid: "",
  barname: "barname",
  index: 666,
  svgBody: "<div>svgBody</div>",
  lightIntensity: 0.3,
  lightColor: "rgba(19, 206, 102, 0.8)"
})

const updateLight = (a, b) => {
  console.log("lightIntensity", form.lightIntensity)
}
const updateLightColor = (val) => {
  // updateLight(val)
  console.log("lightColor", form.lightColor)
}
const selectIcon = (a, b, c) => {
  alert("select")
}
const cancelIcon = () => {
  alert("cancel")
}
const changeFormData = (para: { prop: any; val: any }) => {
  if (form[para.prop]) {
    form[para.prop] = para.val
  }
  // form.value = val
}
let test111 = ref(1)
setTimeout(() => {
  test111.value = 2
}, 5100)
let com1 = new componentConf({
  span: 5,
  formItemProps: { label: "所属类别" },
  comName: "span",
  innerText: "test",
  //_style: "test111.value==1?{background:blue,fontSize:20px}:{}" //xxxx js+json
  // _style: "{background:test111.value==1?'blue':'',fontSize:'20px'}"xxxx json+js
  //_style: "background:test111.value==1?'blue':'';fontSize:'20px'"xxx  str
  _style: "test111.value==1?'background:blue':''" //js
}).value
let com3 = new componentConf({
  comName: "ElRadio",
  props: {
    label: "1"
  },
  domProps: {
    // innerText: "是"
    contentText: "是"
  }
}).value
let com4 = new componentConf({
  comName: "ElRadio",
  props: {
    label: "0"
  },
  domProps: {
    contentText: "否"
  },
  _index: "{item}",
  v_for: [[com1, com3], "item", "_index"] ////arr,item,i
  // onClick: (_index, b, varys: any) => {
  //   console.log({item})
  // },
  // onClick: `selectIcon("svgBody", item,varys)`
  // onClick: "()=>{ 111}"
}).value
let com2 = new componentConf({
  span: 8,
  formItemProps: {
    label: "是否叶子节点"
  },
  _style: `form.isleaf == "1" ? "background:red" : ""`,
  _label: `com3.isleaf == "1" ? "background:red" : ""`,
  // style: form.isleaf == "1" ? "background:red" : "",
  comName: "ElRadioGroup",
  v_model: "isleaf",
  onInput: (a, b, c) => {
    console.log("com2", com2)
    console.log("isleaf:", form.isleaf)
  },
  //disabled: form.barid && form.barid != "",
  childNode: [com3, com4]
}).value
// let com2 = {
//   style: form.isleaf == "1" ? "background:red" : "",
//   class: "",
//   on: {},
//   props: {},
//   formItemProps: {
//     label: "是否叶子节点"
//   },
//   span: 8,
//   offset: 0,
//   push: 0,
//   comName: "ElRadioGroup",
//   v_model: "isleaf",
//   onInput: (a, b, c) => {
//     console.log("com2", com2)
//     console.log("isleaf:", form.isleaf)
//   },
//   childNode: [com3, com4],
//   varys: {}
// }
let row1 = new rowConf({
  props: {
    gutter: 10
  },
  components: [com1, com2]
}).value
let com5 = new componentConf({
  comName: "ElInput",
  formItemProps: {
    label: "对象名称",
    isRequired: true
  },
  class: "dark",
  props: { v_model: "barname" },
  // formProp: "barname",
  onChange: (a, b, c) => {
    console.log("changeevent")
  },
  onInput: (val) => {
    console.log(val)
  },
  span: 10
}).value
let com6 = new componentConf({
  comName: "ElInputNumber",
  formItemProps: {
    label: "顺序",
    isRequired: true,
    prop: "index"
  },
  class: "dark",
  props: {
    "controls-position": "right",
    min: 1,
    v_model: "index"
  },
  span: 10
}).value
let row2 = new rowConf({
  props: {
    gutter: 10
  },
  style: "margin-top:10px",
  components: [com5, com6]
}).value
let row3 = {
  gutter: 20,
  style: "margin-top:10px",
  components: [
    {
      span: 5,
      formItemProps: {
        label: "图标"
      },
      class: "icon-display-box",
      _v_html: "form.svgBody",
      comName: "div"
    },
    {
      span: 4,
      comName: "ElButton",
      type: "primary",
      style: "width: 60px",
      // onClick: `selectIcon("svgBody", item,{varys})`,
      _onClick: "()=>{ alert(111)}",
      contentText: "选择"
    },
    {
      span: 4,
      comName: "ElButton",
      type: "warning",
      style: "width: 60px",
      // onClick: () => {
      //   alert("cancel")
      // },
      //onClick: cancelIcon("svgBody", "svg"),

      contentText: "清除"
    }
  ]
}
const testfunc = (a, b) => {
  alert(111)
}
let row4 = {
  components: [
    { span: 6, comName: "span", contentText: "光照颜色：" },
    {
      span: 18,
      style: "height: 36px",
      comName: "el-color-picker",
      "color-format": "rgb",
      "show-alpha": true,
      size: "large",
      v_model: "form.lightColor",
      onChange: testfunc,
      onActiveChange: updateLightColor
    }
  ]
}
let row5 = {
  components: [
    { span: 6, comName: "span", contentText: "光照强度：" },
    {
      comName: "el-slider",
      span: 18,
      v_model: "form.lightIntensity",
      min: 0,
      max: 1,
      step: 0.1,
      onChange: updateLight,
      "show-input": true,
      "input-size": "small"
    }
  ]
}

let formConf1 =
  //reactive<object>(
  new formConf({
    props: {
      model: form
    },
    test: "111",

    style: {
      background: "#aaa"
    },
    template: [row1, row2, row3, row4, row5]
  }).value

let testConf = reactive(testForm)
form = testConf.props.model
formConf1
//)
watch(
  () => form,
  (nv) => {
    console.log("change", nv)
  },
  { deep: true }
)
const evalFunc = (str: string, varys: object = {}, args = []) => {
  str = str.replaceAll("{varys}", JSON.stringify(varys))
  str = str.replaceAll("{form}", JSON.stringify(form))
  args.forEach((e, i) => {
    let item = typeof e === "object" ? JSON.stringify(e) : e
    str = str.replaceAll(`{${i}}`, item)
  })
  Object.keys(varys).forEach((k) => {
    let item =
      typeof varys[k] === "object" ? JSON.stringify(varys[k]) : varys[k]
    str = str.replaceAll(`{${k}}`, item)
  })
  try {
    let res = JSON.parse(str)
    return res
  } catch (error) {
    try {
      let res = eval(str)
      return res
    } catch (error) {}
  }
}
// const extendFunc = function (callback: Function, vary: any, args: any) {
//   const varys = vary
//   // callback.call(this, ...args)
//   callback(...args)
// }
provide("evalFunc", evalFunc)
// provide("extendFunc", extendFunc)
isload.value = true

const addTodo = () => {
  if (!todo.value) return
  todos.value.push(todo.value)
}
onMounted(() => {
  console.log("mounted")
})
// watchEffect(() => {

// })
// defineProps({

// })
</script>
<style lang="less" scoped>
.container {
  display: flex;
  height: fit-content;
  width: 100%;
  margin: 3%;
  .form {
    margin: 3%;
    flex: 1;
  }
}
</style>
